<template>
  <div>
    <div style="width: 100%; height: 400px; background-color: #483d8b">
      <el-button type="primary" style="margin-top: 5px; width: 300px" disabled>大荧幕</el-button>
      <div style="width: 100%" v-if="isReload">
        <div v-for="i in choseCinema.crow" v-bind:key="i">
          <el-row type="flex" style="margin-left: 5px">
            <el-col
              :span="3"
              v-for="j in choseCinema.ccolumn"
              v-bind:key="j"
              style="margin-left: -5px; margin-top: 5px"
            >
              <el-button
                :type="getType(i, j)"
                style="width: 20px; margin-top: 10px"
                :icon="Avatar"
                @click="xuanze(i, j)"
              ></el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div style="width: 100%; height: 140px; background-color: #333333; text-align: left">
      <span style="color: chocolate">您已选择：</span>
      <div style="width: 100%">
        <div style="width: 70%; float: left">
          <el-tag
            v-for="tag in zsize"
            :key="tag"
            :disable-transitions="false"
            @close="deletTag(tag - 1)"
            closable
          >
            {{ zxzi[tag - 1] }}排{{ zxzj[tag - 1] }}座
          </el-tag>
        </div>
        <div style="width: 30%; float: left">
          <span style="color: orange"><b>总价：</b>{{ zj }}元</span><br />
          <span style="color: orange"><b>是否会员优惠：</b>{{ isVip }}</span
          ><br />
          <el-button type="success" @click="pay">立即结算</el-button>
        </div>
      </div>
    </div>
    <el-dialog title="支付界面" v-model="dialogTableVisible" width="30%">
      <img :src="imgsrc" style="width: 80%; height: 80%" />
      <el-button type="success" @click="payPlan" round>付费成功</el-button>
      <el-button type="danger" @click="outPay" round>付费失败</el-button>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, nextTick, defineExpose } from 'vue';
import router from '../../router';
import { Avatar } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
const choseCinema = reactive({ cid: 1, cname: '一号厅', crow: 7, ccolumn: 8 });
const isReload = ref(true);
const chosePlan = ref();
const zsize = ref(0);
const yxz = ref([]);
const zxzi = ref([]);
const zxzj = ref([]);
const zj = ref(0);
const dialogTableVisible = ref(false);
const imgsrc = require('../../assets/img/收款.jpg');
const order = reactive({
  uid: '',
  pid: '',
  ostate: '未过期',
  buyTime: null,
  price: 0.0,
  orow: -1,
  ocolumn: -1,
});
const panduan = (i, j) => {
  for (let k = 0; k < yxz.value.length; k = k + 1) {
    if (yxz.value[k].orow === i && yxz.value[k].ocolumn === j) {
      return 1;
    }
  }
  for (let k = 0; k < zxzi.value.length; k = k + 1) {
    if (zxzi.value[k] === i && zxzj.value[k] === j) {
      return 2;
    }
  }
  return 0;
};
const getType = function (i, j) {
  if (panduan(i, j) === 1) {
    return 'danger';
  } else if (panduan(i, j) === 0) {
    return 'info';
  } else {
    return 'success';
  }
};
const jiazai = () => {
  isReload.value = false;
  nextTick(() => {
    isReload.value = true;
  });
};
const xuanze = (i, j) => {
  if (zxzi.value.length >= 6) {
    alert('您的账号最多可以购买该场次6张票');
    return;
  }
  var f = 0;
  for (var k = 0; k < yxz.value.length; k = k + 1) {
    if (yxz.value[k].orow === i && yxz.value[k].ocolumn === j) {
      alert('该座位已经被其他用户选择！');
      f = 1;
      break;
    }
  }
  if (f == 0) {
    let f1 = 0;
    for (let k1 = 0; k1 < zxzi.value.length; k1 = k1 + 1) {
      if (zxzi.value[k1] == i && zxzj.value[k1] == j) {
        alert('该座位您已经选择！');
        f1 = 1;
        break;
      }
    }
    if (f1 == 0) {
      let k2 = zxzi.value.length;
      zxzi.value[k2] = i;
      zxzj.value[k2] = j;
      zsize.value = k2 + 1;
      if (JSON.parse(sessionStorage.getItem('isVip')) === 'YES') {
        zj.value = zj.value + parseFloat(chosePlan.value.price) * 0.9;
      } else {
        zj.value = zj.value + parseFloat(chosePlan.value.price);
      }
      jiazai();
    }
  }
};
const deletTag = i => {
  zxzi.value.splice(i, 1);
  zxzj.value.splice(i, 1);

  if (JSON.parse(sessionStorage.getItem('isVip')).toString() == 'Yes') {
    zj.value -= parseFloat(chosePlan.value.price) * 0.9;
  } else {
    zj.value -= parseFloat(chosePlan.value.price);
  }
  zsize.value = zsize.value - 1;
};
const pay = () => {
  dialogTableVisible.value = true;
};
const payPlan = () => {
  if (sessionStorage.getItem('username') === null) {
    ElMessage({
      showClose: true,
      message: '您还未登录！请先登录！',
      type: 'error',
    });
  } else {
    let str = '添加成功';
    for (let k = 0; k < zsize.value; k = k + 1) {
      order.uid = JSON.parse(sessionStorage.getItem('uid'));
      order.pid = chosePlan.value.pid;
      if (JSON.parse(sessionStorage.getItem('isVip')).toString() === 'Yes') {
        order.price = parseFloat(chosePlan.value.price) * 0.9;
      } else {
        order.price = parseFloat(chosePlan.value.price);
      }
      order.orow = zxzi.value[k];
      order.ocolumn = zxzj.value[k];
      axios.post('api/order/addOrder', order).then(res => {
        if (res.data === '添加失败') {
          str = res.data;
        }
      });
    }

    if (str === '添加成功') {
      alert('已成功购买！');
    }

    router.go(0);
  }
};
const outPay = () => {
  dialogTableVisible.value = false;
};
defineExpose({ choseCinema, chosePlan, yxz, zxzi, zxzj, zj, zsize });
</script>
